@import './base';
@vw:3.75vw;
header {
    width: 100%;
    height: (50/@vw);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    .headerTop {
        display: block;
        width: (235/@vw);
        height: (50/@vw);;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .headerBottom {
        line-height:(30/@vw) ;
        width: (80/@vw);
        height: (30/@vw);
        background-color: #ffee0f;
        border-radius: (15/@vw);
        text-align: center;
        margin-top: (10 /@vw);
    }
}
.search {
    margin-top: (58 /@vw);
    background-color: #f2f4f5;
}
.txt {
    height: (32 / @vw);
    background-color: #f2f4f5;
    border-radius: (16 / @vw);
    text-align: center;
    line-height: (32 / @vw);
    color: #a1a4b3;
    font-size: (14 / @vw);
    }
    .banner img {
        width: 100%; 
        height: (160 / @vw);
        margin-top: (10 /@vw);
        padding: (10 /@vw);
    }
    .rank {
        width: 100%;
        height: (25/@vw);
        display: flex;
        justify-content: space-between;
        margin-top: (10 /@vw);
        padding: (10 /@vw);
        .list {
            font-size: 18px;
            font-weight: 700;
        }
        .more {
            line-height: (25/@vw);
        }
    }
    .recommendedPlaylists {
        padding: (10 /@vw);
        width: 100%;
        height: (150 /@vw);
        display: flex;
        margin-top: (10 /@vw);
        .recommend {
            width:40% ;
            img {
                width: 100%;
                height: 100%;
                border-radius: 10%
            }
        }
        .playlist {
            padding: (8 /@vw);
            width:60% ;
            height: (150 /@vw);
            line-height: (30 /@vw);
            .playlistItem {
                font-size: 18px;

            }
        }
    }
    .music {
        width: 100%;
        height: (50 /@vw);
        background-color: #fff;
        position: fixed;
        bottom: (20 /@vw);
        border-radius: (35 /@vw);
        display: flex;
        justify-content: space-between;
        .headerTop {
        display: block;
        width: (235/@vw);
        height: (50/@vw);;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .headerBottom {
        line-height:(30/@vw) ;
        width: (80/@vw);
        height: (30/@vw);
        background-color: #fff;
        border-radius: (15/@vw);
        text-align: center;
        margin-top: (10 /@vw);
    }
    }